<template>
  <div>
    <div class="gonggao">
      <div>
         <div class="ad">
        <i class="iconfont">&#xe633;</i>
          <p class="content">
            <span>隐私协议</span>
          </p>
         </div>
        <!-- <div>
          <div>您当前的位置:
            <router-link to="/shouye">首页-></router-link>
            公告栏->最新公告</div>
            <hr>
        </div> -->
      
        <div class="content_o">
        
            <h1>心食谱开站公告</h1>
          <span>尊敬的各位朋友：</span>
          <p id="w">隐私协议，对于餐厅的运营来说，想要做好餐厅的经营，提供餐厅的收益，不能忽略每一个经营的细节。菜单作为展示餐厅菜品的一个目录，菜谱设计的重要性不言而喻。一本精致的菜谱首先给人的感觉应该是一目了然的店名，独特的菜谱封面设计。菜品合理的分类和排版，对菜品进行合理的归类，让顾客能更快的找到想要的菜品。菜谱页尾要留下地址、联系方式、经营时间等。图片选用高清质量的图片，图片的背景、菜品的摆盘和拍摄都是需要注意的。要做到看上去一目了然，能勾起顾客的食欲，吸引顾客的眼球。文字主要是菜名、菜品介绍和价格的标注。介绍菜品是文字有需要合理的排版，字体、字号、间距适当。菜品介绍字号一般要比菜名较小，不要喧宾夺主。菜品价格要与其他文字有所区分，第一眼就能看见。根据餐厅的风格来设计菜谱，菜谱的风格应和餐厅风格一致，图片色彩的运用要和风格相符。菜品排版和菜品分类一致。精致的菜谱排版设计要符合顾客的阅读习惯，合理的排版设计能更好的把菜品呈现给顾客，牢牢的抓住顾客的眼球。</p><hr>
          <p id="w_1">尊敬的各位朋友，欢迎大家齐聚于此。心食谱组织于2022年5月28日，克服重重困难，历时21天，最终于2022年6月18日正式成立。我们致力于美食的发掘与发扬，心食谱，新味道，新感觉，希望给大家带来全新的体验，感谢大家的支持与关注。</p>
          <div>
            <p>心食谱有限责任公司</p>
            <p>2022年6月18日</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
  export default {
  }
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2516453 */
  src: url("//at.alicdn.com/t/font_2516453_g6qjhhqblt9.woff2?t=1620545333370")
      format("woff2"),
    url("//at.alicdn.com/t/font_2516453_g6qjhhqblt9.woff?t=1620545333370")
      format("woff"),
    url("//at.alicdn.com/t/font_2516453_g6qjhhqblt9.ttf?t=1620545333370")
      format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.ad {
  width: 980px;
  height: 60xp;
  background-color: #fff;
  align-items: center;
  display: flex;
  border-radius: 8px;
  box-sizing: border-box;
  height: 60px;
  margin-bottom: 24px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 40px;
  color: #353535;
  margin-bottom: 30px;
  cursor: pointer;
  box-shadow: 2px 1px 8px 1px rgb(228, 232, 235);
  margin: 40px auto;

  i {
    color: #ff6146;
    font-size: 20px;
    margin-right: 10px;
  }
   @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .content{
    flex: 1;
    overflow: hidden;
    
    span {
      display: block;
      width: auto;
      white-space: nowrap;
      // animation: marquee 30s linear infinite;
      // padding-left: 105%;
      padding-left: 0;
      padding-right: 120%;
      &:hover {
        animation-play-state: paused;
      }
    }
  }
}
.content_o{
			height: 50%;
			width: 50%;
			margin: auto;
      padding: 50px;
  border: 3px solid;
  font-size:40px;
  color: #696969;
  line-height:29px;
  border-radius:23px;
  border-color: orange;
}
.content_o>h1{
  text-align: center;
}
#w{
  text-indent:2em;
}
#w_1{
   text-indent:2em;
}
.content_o>div{
  font-size:30px;
  text-align:right;

}
</style>